import React,{ Component } from 'react';
import { Table, Button , Space ,Modal,Form, Input,message,Popconfirm} from 'antd';
import './index.css';
class VisitingRecord extends Component {
    formRef = React.createRef();
    constructor(props) {
        super(props);
        this.state = { 
            visible:false,
            data:this.props.data
        }
    }
    //WARNING! To be deprecated in React v17. Use componentDidMount instead.
    componentWillReceiveProps(nextProps) {
        console.log(nextProps)
        this.setState({ data: nextProps.data });
    }

    columns = [
        {
          title: '出诊记录编号',
          dataIndex: 'id',
          key: 'id',
          align: 'center'
        },{
            title: '病人姓名',
            key: 'patient_name',
            dataIndex: 'patient_name',
            align: 'center'
          },{
          title: '医生姓名',
          dataIndex: 'doctor_name',
          key: 'doctor_name',
          align: 'center'
        },{
          title: '出诊时间',
          dataIndex: 'date',
          key: 'date',
          align: 'center'
        },{
          title: '地址',
          key: 'address',
          dataIndex: 'address',
          align: 'center'
        },{
            title: '时长',
            key: 'datetime',
            dataIndex: 'datetime',
            align: 'center'
          },{
          title: '操作',
          key: 'action',
          align: 'center',
          render: (text, record,index) => {
            return (<Space size="middle">
                <Button type="primary" onClick={this.showModal.bind(this,index)}>修改</Button>
                <Popconfirm 
                    title="确定删除这一项吗？"
                    okText="确定"
                    cancelText="取消"
                    onConfirm={this.SureDel}
                    onCancel={this.CancelDel}
                ><Button type="primary" onClick={this.DelIndex.bind(this,index)} danger>删除</Button>
                </Popconfirm>
            </Space>
          )},
        },
      ];
      //删除按钮的操作
      CancelDel(){
          message.warning('用户取消');
      }
      SureDel = (index)=>{
        //   let obj = this.state.data.splice(index,1);
          let obj = [...this.state.data];
          console.log("index",index);
          obj.splice(index,1)
          this.setState({data:obj},()=>console.log(this.state.data));
      }
      DelIndex = (index)=>{
        console.log(index)
      }
    //修改按钮的操作
    showModal = (index)=>{
        const {data} = this.props;
        this.formRef.current.setFieldsValue({
            name:data[index].name,
            inventory:data[index].inventory,
            price:data[index].price,
            type:data[index].type,

        });
        this.setState({
            visible: true,
        });

    }
    //提示信息
    messageTip(type){
        switch(type){
            case 'success':
                message.success('修改成功!');
                break;
            case 'error':
                message.error('操作出错，请稍后再试！');
                break;
            case 'warning':
                message.warning('未作出任何更改!');
                break;
            default:break;
        }
    }
    //确定修改的操作
    handleOk(){
        this.messageTip('success');

        this.setState({
            visible: false,
        });
    }
    //取消修改的操作

    handleCancel(){
        this.messageTip('warning');

        this.setState({
            visible: false,
        });
    }


    render() { 
        return (
            <div>
                <Table columns={this.columns} dataSource={this.state.data} className='VisitingAllMain_table'/>
                <Modal
                    title="修改内容"
                    centered
                    visible={this.state.visible}
                    okText='确认'
                    cancelText='关闭'
                    onOk={() => this.handleOk()}
                    onCancel={() => this.handleCancel()}
                    width={600}
                    forceRender = {true}
                >
                 <Form name="visitig_form" ref={this.formRef} initialValues={{ 'visitig_form_name': 'true' }} layout='horizontal' >
                    <Form.Item label='出诊记录编号' name='id'><Input /></Form.Item>
                    <Form.Item label='病人编号'name='patient_id'><Input /></Form.Item>
                    <Form.Item label='医生编号' name='doctor_id'><Input /></Form.Item>
                    <Form.Item label='出诊时间' name='date'><Input /></Form.Item>
                    <Form.Item label='地址' name='address'><Input /></Form.Item>
                    <Form.Item label='时长' name='datetime'><Input /></Form.Item>
                 </Form>
                </Modal>
            </div>
        );
    }
}
export default VisitingRecord;